<template>
	<div>
		<div id='cate'>
			<ul v-bind="{style:'width:'+ulWidth+'px'}">

				<li  @click="getimages(0)">全部</li>
				<li v-for="(item,index) in cates" @click="getimages(item.id)" :key = 'index'>{{item.title}}</li>
			</ul>
		</div>
		<div id='imglist'>
			<ul>
				<li v-for="(item,index) in list" :key='index'>
					<router-link v-bind='{to:"/photo/photoinfo/"+item.id}'>
						<img v-lazy="item.img_url">
					</router-link>
					<div id="desc">
						<h5 v-text="item.title"></h5>
						<p v-text="item.zhaiyao"></p>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return {
				cates:[],
				ulWidth:320,
				list:[]
			}
		},
		created(){
			this.getcates();
			this.getimages(0)
		},
		methods:{
			getcates(){
				this.$http.get('http://www.lovegf.cn:8899/api/getimgcategory').then(function(res){
					if(res.body.status !=0){
						this.$toast(res.body.message);
						return
					}
					this.cates=res.body.message;
					var w = 62;
					var count = res.body.message.length + 1;
					this.ulWidth = w * count ;
				})
			},
			getimages(cateid){
				cateid = cateid || 0;
				this.$http.get('http://182.254.146.100:8899/api/getimages/'+cateid).then(function(res){
					if(res.body.status !=0){
						this.$toast(res.body.message);
						return
					}
					this.list=res.body.message;

				})
			}
		}
	}
</script>

<style scoped>
	#cate{
		width: 375px;
		max-width: 375px;
		overflow-x: auto;
	}
	#cate ul{
		margin: 0px;
		padding-left: 10px;
	}
	#cate li{
		cursor: pointer;
		list-style: none;
		display: inline-block;
		color:#0094ff;
		font-size: 14px;
		padding-left: 6px;
	}

	#imglist{

	}
	#imglist ul {
		padding-left: 0;
	}
	#imglist li{
		list-style:none;
		position: relative ;
	}
	#imglist img{
		width:100%;
		height: 300px;
	}

	#desc{
		width: 100%;
		background-color: rgba(0,0,0,0.2);
		position: absolute;
		bottom: 2px;
		left: 0px;
	}

	#desc h5{
		color: #ffffff;
		font-weight: bold;
	}
	#desc p{
		color:#fff;
	}

	image[lazy=loading] {
		width: 40px;
		height: 300px;
		margin: auto;
	}
</style>
